<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>this is an index page under category</h1>
<a href="category/addCategory.html">添加</a>
<div id="show">
    <h2>使用 AJAX 修改该文本内容</h2>
</div>
<button name="after">上一页</button>
<button name="next">下一页</button>
</body>
<script>
    $(document).ready(function () {
        // $("button").click(function(){
        //     $("#show").load("/category/getAll");
        // });

        var pageNum = 1;
        var param;

        $("button").click(function (e) {

            if($(this).attr("name") == "next"){
                pageNum++
            }else {
                pageNum--
            }
            param = {pageNum:pageNum}

            $.post("/category/list",param , function (data, status) {
                var result = data.data;
                var html = "<ul><br/>";
                $.each(result.list, function (index, e) {
                    html += "<li>" +
                        "   id   " + e.id +
                        "   类目名   " + e.name +
                        "   图片   <img src=\"" + e.imageSrc + "\">" +
                        // 时间戳转时间
                        "   创建时间   " + new Date(parseInt(e.createTime)).toLocaleString().replace(/:\d{1,2}$/, ' ') +
                        "</li><br/>"
                });
                html += "</ul>"
                html += "<p>当前是第" + result.pageNum + "页， 总页数：" + result.total + "，数据总条数 " + result.pages + " </p>"

                if(pageNum > result.pages){
                    pageNum = result.pages-1;
                }
                if(pageNum <= 1){
                    pageNum = 1;
                }
                $("#show").html(html);

            });
        });
    });
</script>
</html>